// ------------------------------------------------
// 文章部分样式表
// ------------------------------------------------
.post-wrapper {
  position: relative;
  .post-content {
    width: 90%;
    margin: 0 auto;
    max-width: 1200px;
    padding-bottom: 24px;
    transition: all 0s;
    &.has-side {
      .post-content {
        width: 90%;
      }
    }
    H1, H2, H3, H4, H5, H6{
      font-weight: 400;
      &::before{
        content: "#";
        margin-right: 8px;
        color: @active-link;
      }
    }
    .md-preview{
      img{
        position: relative;
        &:before {  
          content: "「 " attr(alt) " 」加载失败，反馈:lzan13@sina.com";
          display: block;
          position: absolute;
          top: -8px;
          width: 100%;
          height: 48px;
          line-height: 48px;
          background-color: rgb(230, 230, 230);
          border: 2px dotted rgb(200, 200, 200);
          border-radius: 5px;
          text-align: center;
          font-size: 16px;
          font-style: normal;
          font-family: FontAwesome;
          color: rgb(100, 100, 100);
        }
      }
      blockquote{
        border-left: 4px solid @decoration-dark;
        font-style: normal;
      }
      .quote-center {
        position: relative;
        margin: 40px 0;
        padding: 0;
        text-align: center;
        &::before, &::after {
          position: absolute;
          display: block;
          content: ' ';
          width: 100%;
          height: 24px;
          opacity: 0.2;
          background-repeat: no-repeat;
          background-position: 0 -6px;
          background-size: 22px 22px;
        }
        &::before {
          top: -20px;
          background-image: url(../images/ic-quote-left.svg);
          border-top: 1px solid @decoration-dark;
        }
        &::after {
          bottom: -20px;
          background-image: url(../images/ic-quote-right.svg);
          border-bottom: 1px solid @decoration-dark;
          background-position: 100% 8px;
        }
        p, div { text-align: center; }
      }
    }
  }
}

.post-footer{
  margin-top: 24px;
}

// 文章返回顶部
#go-to-top {
  display: inline-block;
  text-align: center;
  position: fixed;
  width: 48px;
  height: 48px;
  line-height: 48px;
  right: 32px;
  bottom: 64px;
  border-radius: 100%;
  background: @inactive-dark;
  color: @inactive-light;
  .iconfont{
    font-size: 32px;
  }
  &:hover {
    background: @active-dark;
    color: @active-light;

  }
}
// 侧边目录导航
.navbar-side {
  position: absolute;
  right: -308px;
  top: 0;
  width: 300px;
  border-left: 1px solid @decoration-dark;
  height: 100%;
  transition: all .2s;
}

@media(max-width:960px){
  .navbar-side{
    display: none;
  }
}

.copy-code-wrapper {
  position: absolute;
  color: #fff !important;
  text-decoration: none;
  background: rgba(0, 0, 0, .65);
  font-size: 12px;
  padding: 0 6px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  cursor: pointer;
  width: 45px;
  text-align: center;
  &:hover {
    text-decoration: none !important;
  }
}

// 全屏查看图片样式
.is-hidden{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  z-index: 0;
}
.is-displayed{
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: @bg-translucence-dark;
  z-index: 999;
}

#show-image-layer{
  img {
    max-width: 95%;
    max-height: 95%;
    box-shadow: 0 5px 36px 2px @shadow-dark;
  }
  .show-image-src{
    position: absolute;
    bottom: 16px;
    padding: 4px 16px;
    color: @text-light;
    border-radius: 24px;
    border: 1px solid @bg-translucence-light;
    background: @bg-translucence-grey;
    &:hover{
      cursor: pointer;
      background: @bg-grey;
    }
  }
}